import { Component } from "react";
import './li.css'
const data = [
  {
    tab: '线上活动',
    name: '线上活动',
    checked: true
  },
  {
    tab: '推广类',
    name: '推广类',
    checked: false
  },
  {
    tab: '线下活动',
    name: '线下活动',
    checked: false
  },
  {
    tab: '品牌介绍',
    name: '品牌介绍',
    checked: false
  }
]
class li extends Component {
  state = {
    title: '',
    name: '',
    tels: '',
    date: '',
    time: '',
    occup:'',
    content: '',
    sex: '1',
    switch: true
  }
  zhongxin = (e) => {
    this.setState({
      title: e.target.value
    })
  }
  tel = (e) => {
    this.setState({
      tels: e.target.value
    })
  }
  cheng = (e) => {
    this.setState({
      name: e.target.value
    })
  }
  ri = (e) => {
    console.log(e.target.value);
    this.setState({
      date: e.target.value
    })
  }
  qi = (e) => {
    console.log(e.target.value);
    this.setState({
      time: e.target.value
    })
  }
  miao = (e) => {
    console.log(e.target.value);
    this.setState({
      content: e.target.value
    })
  }
  handleSex = (e) => {
    console.log(e.target.value);
    this.setState({
      sex: e.target.value
    })
  }
  occupation = (e) =>{
    this.setState({
      occup: e.target.value
    })
  }
  duo = (e, index) => {
    console.log(e.target.name);
    if (e.target.type === 'checkbox') {
      data[index].checked = !data[index].checked
      
    }
    let name = e.target.name
    let value = e.target.value
    this.setState({
      [name]: value
    })
  }
  swit = (e) => {
    console.log(e.target.checked);


  }
  kai = (e) => {
    // console.log(e.target);
    this.setState({
      // switch:e.
    })
  }
  log = () =>{
    console.log();
  }
  render () {
    return (
      <div className="home">
        <div className="top">
          <div className="ming">
            <a>* </a>
            <span>
              活动名称
              <input type="text" onChange={this.zhongxin} Placeholder="前端前景技术发展交流" />
            </span>
          </div>
        </div>
        <div className="top">
          <div className="ming1">
            <a>* </a>
            <span>
              城市
              <select name="" id="" onChange={this.cheng} className="bbb">
                <option value="北京">北京</option>
                <option value="天津">天津</option>
              </select>
            </span>
          </div>
        </div>
        <div className="qi">
          <a>* </a>
          日期 <input type="date" onChange={this.ri} value="2017-06-01" />
          <span>-</span>
          <input type="date" onChange={this.qi} value="2017-06-01" />
        </div>
        <div className="huo">
          <div className="ming3">
            <a>* </a>
            <span>
              报名电话
              <input type="text" onChange={this.tel} Placeholder="请输入报名电话" />
            </span>
          </div>
        </div>
        <div className="yun">
          <a>* </a>
          允许电话沟通
          <input
            type="checkbox"
            id="my_switch"
            class="my_switch"
            value={this.state.switch} onClick={this.swit} onChange={this.kai}
          />
          <label id="label" for="my_switch"></label>
        </div>

        <div className="ye">
          <a>* </a>
          <span>
            目前职业
            <input type="text" onChange={this.occupation} Placeholder="请输入你目前职业" />
          </span>
        </div>
        <div className="a1">
          <a>* </a>
          活动类型
          {
            data.map((item, key) => {
              return (
                <label key={key}>
                  <input type="checkbox" checked={item.checked} onChange={(e) => this.duo(e, key)} name={item.name} className="fu" />{item.tab}
                </label>
              )
            })
          }
        </div>
        <div className="a2">
          <a>* </a>
          活动赞助商
          <input type="radio" value='1' checked={this.state.sex === '1'} onChange={this.handleSex}/>
          淘宝
          <input type="radio" value='2' checked={this.state.sex === '2'} onChange={this.handleSex}/>
          京东
        </div>
        <div className="wen">
          <span>
            {' '}
            <a>* </a>描述
          </span>{' '}
          <input type="textarea" onChange={this.miao} className="ben" />
        </div>

        <div className="base">
          <input type="button" value={'提交'} onClick={this.log} className="base1" />
          <input type="button" value={'重置'} className="base2" />
        </div>
      </div>
    );
  }
}

export default li;